<template>
  <view
    class="mosowe-table-component"
    :style="{
      '--checkbox-shadow': showIndex ? 'none' : '4px 0 2px rgba(0, 0, 0, 0.1)'
    }"
  >
    <!-- 搜索区 -->
    <slot name="search">
      <!-- <view class="mosowe-table-search" v-if="Object.keys(searchConfig.list[0].items).length">
       <mosowe-form
          ref="mosoweSearchRef"
          :options="searchConfig"
          filterEmpty
          hideButton
          @submit="searchDate"
          @reset="searchDate"
          @change="searchFromChange"
        >
          <template #lineAfter="{ submit, reset }">
            <view class="search-btn-wrap">
              <button class="search-btn" type="primary" size="mini" @click="submit">查询</button>
              <button class="search-btn" size="mini" type="default" @click="reset">重置</button>
              <view
                v-if="defaultShowSearchNumber < Object.keys(searchConfig.list[0].items).length"
                class="search-open-btn"
                @click="onSearchOpen"
              >
                <text>{{ searchOpenAll === false ? '展开' : '收起' }}</text>
                <text
                  :class="searchOpenAll === false ? 'uni-icons-arrowdown' : 'uni-icons-arrowup'"
                ></text>
              </view>
            </view>
          </template>
        </mosowe-form>
      </view> -->
    </slot>
    <!-- 其他数据展示区 -->
    <slot name="more"></slot>

    <!-- 表格区 -->
    <view
      class="mosowe-table-table"
      :class="{
        'mosowe-table-auto-height': autoHeight && !maxHeight,
        'mosowe-table-max-height': maxHeight,
        'mosowe-table-radio-selection': radio
      }"
      :style="{
        '--table-max-height': maxHeight.endsWith('px') ? maxHeight : maxHeight + 'px'
      }"
    >
      <view class="mosowe-table-table-content table-scroll-bar">
        <uni-table
          ref="mosoweTableRef"
          v-bind="tableProps"
          :loading="tableLoading"
          @selection-change="tableSelectionChange"
        >
          <!-- head -->
          <uni-tr class="table-head-wrap">
            <!-- 序号列 -->
            <uni-th
              v-if="showIndex"
              class="th-fixed-left mosowe-index"
              :class="{
                'fixed-left-shadow': Object.keys(stickyDataOffsetLeft).length === 0
              }"
              :style="{
                left: stickyIndexOffsetLeft + 'px'
              }"
              width="60"
            >
              序号
            </uni-th>
            <!-- 数据列 -->
            <uni-th
              v-for="(colnum, index) in tableShowColumn"
              :key="colnum.value"
              :class="{
                'th-fixed-left': colnum.fixed === 'left',
                'th-fixed-right': colnum.fixed === 'right',
                ['th-fixed-left-' + colnum.value]: colnum.fixed === 'left',
                ['th-fixed-right-' + colnum.value]: colnum.fixed === 'right',
                'fixed-left-shadow':
                  colnum.fixed === 'left' &&
                  colnum.value === Object.keys(stickyDataOffsetLeft).reverse()[0],
                'fixed-right-shadow':
                  colnum.fixed === 'right' &&
                  colnum.value === Object.keys(stickyDataOffsetRight)[0],
                'children-head-th': colnum.children && colnum.children.length
              }"
              :style="{
                left: colnum.fixed === 'left' ? stickyDataOffsetLeft[colnum.value] : 'unset',
                right: colnum.fixed === 'right' ? stickyDataOffsetRight[colnum.value] : 'unset',
				background: background
              }"
              :width="colnum.width ? colnum.width : '100'"
              v-bind="colnum"
              @sort-change="tableThSortChange($event,colnum)"
              @filter-change="tableThFilterChange"
            >
              <slot :name="colnum.value + 'Header'" :index="index" :colnum="colnum">
                <mosowe-th
                  v-if="colnum.children && colnum.children.length"
                  :column="colnum"
                  width="100%"
                  :border="tableProps.border"
                ></mosowe-th>
                <view v-else>{{ colnum.text }}</view>
              </slot>
            </uni-th>
            <!-- 操作列 -->
            <uni-th
              v-if="rowOperation.length || $slots.rowOperation"
              :width="rowOperationWidth"
              class="th-fixed-right mosowe-operation"
              :class="{
                'fixed-right-shadow': Object.keys(stickyDataOffsetRight).length === 0
              }"
              :style="{
				background: '#fff'
              }"
            >
              操作
            </uni-th>
          </uni-tr>
          <!-- body -->
          <uni-tr class="table-body-wrap" v-for="(item, index) in dataList" :key="index">
            <!-- 序号列 -->
            <uni-td
              v-if="showIndex"
              class="td-fixed-left"
              :class="{
                'fixed-left-shadow': Object.keys(stickyDataOffsetLeft).length === 0
              }"
              :style="{
                left: stickyIndexOffsetLeft + 'px'
              }"
              align="left"
            >
              {{ index + 1 }}
            </uni-td>
            <!-- 数据列 -->
            <uni-td
              @click="onGetTdItemChange(colnum,index)"
              v-for="colnum in tableShowColumn"
              :key="colnum.value"
              :class="{
                'td-fixed-left': colnum.fixed === 'left',
                'td-fixed-right': colnum.fixed === 'right',
                ['td-fixed-left-' + colnum.value]: colnum.fixed === 'left',
                ['td-fixed-right-' + colnum.value]: colnum.fixed === 'right',
                'fixed-left-shadow':
                  colnum.fixed === 'left' &&
                  colnum.value === Object.keys(stickyDataOffsetLeft).reverse()[0],
                'fixed-right-shadow':
                  colnum.fixed === 'right' &&
                  colnum.value === Object.keys(stickyDataOffsetRight)[0],
                'children-body-td': colnum.children && colnum.children.length
              }"
              :style="{
                left: colnum.fixed === 'left' ? stickyDataOffsetLeft[colnum.value] : 'unset',
                right: colnum.fixed === 'right' ? stickyDataOffsetRight[colnum.value] : 'unset',
				background: '#fff'
              }"
              :align="colnum.align || 'left'"
            >
              <slot
                :name="colnum.value + 'Default'"
                :index="index"
                :rowData="item"
                :colnum="colnum"
              >
                <mosowe-td
                  v-if="colnum.children && colnum.children.length"
                  :column="colnum"
                  width="100%"
                  :itemData="item"
                  :border="tableProps.border"
                ></mosowe-td>
                <text v-else>{{ tableTdContent(colnum, item[colnum.value]) }}</text>
                <!-- <text>{{ tableTdContent(colnum, item[colnum.value]) }}</text> -->
              </slot>
            </uni-td>
            <!-- 操作列 -->
            <uni-td
              v-if="rowOperation.length || $slots.rowOperation"
              :width="rowOperationWidth"
              class="td-fixed-right"
              :class="{
                'fixed-right-shadow': Object.keys(stickyDataOffsetRight).length === 0
              }"
            >
              <slot name="rowOperation" :index="index" :rowData="item">
                <template v-for="btn in rowOperation">
                  <text
                    class="table-tr-operation-btn"
                    v-if="btn.type === 'text' && btn.isShow"
                    :style="btn.config"
                    @click="() => btn.click(item)"
                  >
                    {{ btn.text }}
                  </text>
                  <button
                    class="table-tr-operation-btn"
                    v-if="btn.type === 'button' && btn.isShow"
                    v-bind="btn.config"
                    :style="{
                      verticalAlign: 'middle',
                      display: 'inline-block'
                    }"
                    @click="() => btn.click(item)"
                  >
                    {{ btn.text }}
                  </button>
                </template>
              </slot>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
      <view class="table-bottom-shadow"></view>
    </view>
    <!-- 分页区 -->
<!--    <view class="mosowe-table-pagination" v-if="pagination">
      <view class="pagination-left"><slot name="paginationLeft"></slot></view>
      <view class="pagination-content">
        <uni-pagination
          ref="mosowePaginationRef"
          v-bind="paginationConfig"
          :total="paginationTotal"
          @change="paginationChange"
        ></uni-pagination>
      </view>
    </view> -->
    <!-- 分页底部区 -->
    <slot name="under"></slot>
  </view>
</template>

<script>
let _this = this;
export default {
  name: 'mosowe-table',
  props: {
    column: {
      type: Array,
      default: () => []
    },
    localData: {
      type: Array,
      default: () => []
    },
    requestMethod: Function,
    autoRequest: {
      type: Boolean,
      default: true
    },
    tableProps: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    initBefore: Function,
    dataListKey: {
      type: String,
      default: 'list'
    },
    dataTotalKey: {
      type: String,
      default: 'total'
    },
    toolbar: {
      type: [Boolean, String],
      default: true,
      validator: value => {
        if ([true, false].includes(value)) {
          return true;
        } else if (typeof value === 'string') {
          // export add download delete column density refresh
          const authList = ['export', 'add', 'download', 'delete', 'column', 'refresh'];
          const valueArr = value.split(',');
          valueArr.forEach(item => {
            if (!authList.includes(item)) {
              return false;
            }
          });
          return true;
        }
        return false;
      }
    },
    pagination: {
      type: [Boolean, Object],
      default: true
    },
    defaultOpenSearch: {
      type: [Boolean, Number],
      default: false
    },
    autoHeight: {
      type: Boolean,
      default: false
    },
    maxHeight: {
      type: String,
      default: ''
    },
    showIndex: {
      type: Boolean,
      default: false
    },
    rowOperation: {
      type: Array,
      default: () => []
    },
    rowOperationWidth: {
      type: String,
      default: '100'
    },
    exportSelectConfig: {
      type: Object,
      default: () => ({
        type: 'xls',
        filename: ''
      })
    },
    radio: {
      type: Boolean,
      default: false
    },
	background: {
		type: String,
		default: '#fff'
	}
  },
  data() {
    _this = this;
    return {
      //搜索配置
      searchConfig: {
        formConfig: {
          'label-width': '80px',
          'label-align': 'right'
        },
        list: [
          {
            items: {}
          }
        ]
      },
      searchItemsCol: {
        // 搜索的每一项的col布局
        xs: 24,
        sm: 12,
        md: 8,
        lg: 6,
        xl: 6
      },
      tableInitColumn: [], // 表格初始列配置数据
      tableShowColumn: [], // 表格已选列显示集合
      tableShowColumnValues: [], // 表格已选显示列的value集合，用于右上角dropdown-column-list列展示默认选择
      tableLoading: false, // 表格数据加载中
      showToolbarColumnSetDialog: false, // 显示表头配置下拉框
      paginationConfig: {
        // 分页默认配置
        current: 1,
        pageSize: 10
      },
      paginationTotal: 0, // 总数据
      paginationCurrentTimer: null, // 翻页时节流处理
      paginationSizeList: [
        // 每页展示数目列表
        {
          text: '10条',
          value: 10
        },
        {
          text: '20条',
          value: 20
        },
        {
          text: '50条',
          value: 50
        },
        {
          text: '100条',
          value: 100
        }
      ],
      dataList: [], // 表格展示的数据列表
      searchOpenAll: false, // 是否展开所有搜索项
      searchQuery: null, // 搜索筛选数据
      selectData: [], // 已选表格数据项
      selectPageData: {}, //  存储每页已选项数据
      selectPageIndexs: {}, // 存储每页已选项索引，翻页时回显
      selectCurrentIndexs: [], // 当前页已选项索引
      selectCurrent: 1, // 存储翻页前的页码数
      stickyIndexOffsetLeft: 0, // 序号初始化到父级左侧距离
      stickyDataOffsetLeft: {}, // 左侧展示的固定列数据项左边距集合
      stickyDataOffsetRight: {}, // 右侧展示的固定列数据项右侧距集合
      exportData: [], // 导出已选的数据，以selectData为基础，需要转化下含有enum的数据
      exportExcel: {
        // 导出已选exccl配置数据
        type: 'xls',
        filename: '',
        fields: {}
      }
    };
  },
  computed: {
    defaultShowSearchNumber: () => {
      // 窗口收起时默认展示搜索项个数
      const windowWidth = uni.getWindowInfo().windowWidth;
      if (windowWidth >= 1920) {
        return 3;
      }
      if (windowWidth >= 1200) {
        return 3;
      }
      if (windowWidth >= 992) {
        return 2;
      }
      if (windowWidth >= 768) {
        return 2;
      }
      return 1;
    }
  },
  watch: {
    column: {
      handler: () => {
        // 配置表格搜索+配置初始化默认查询参数
        let items = {};
        _this.column
          .filter(column => column.search)
          .sort((a, b) => (b?.searchOrder || 0) - (a?.searchOrder || 0))
          .forEach(column => {
            items[column.value] = {};
            if (typeof column.search === 'boolean') {
              items[column.value] = {
                type: column.enum ? 'select' : 'input',
                col: _this.searchItemsCol,
                defaultValue: null,
                typeProps: {
                  placeholder: '请输入',
                  localdata: column?.enum || null
                },
                formItemProps: {
                  label: column.text
                }
              };
            } else {
              items[column.value] = {
                formItemProps: {
                  label: column.text
                },
                ...column.search,
                col: _this.searchItemsCol
              };
            }
          });
        _this.searchConfig.list[0].items = items;
        _this.searchOpenCloseFunction();

        // 取出表格原始列，用于表格右上方切换列显示功能，仅初次渲染
        if (!_this.tableInitColumn.length) {
          const fixedLeftArr = _this.column.filter(item => item?.fixed === 'left'); // 左侧固定项靠前
          const fixedRightArr = _this.column.filter(item => item?.fixed === 'right'); // 右侧固定项靠后
          const noFixedArr = _this.column.filter(item => !item?.fixed); // 无固定项数据

          _this.tableInitColumn = [...fixedLeftArr, ...noFixedArr, ...fixedRightArr]
            .filter(item => !item.hideInTable)
            .map(item => ({
              ...item,
              disable: item.mustShow
            }));
        }
        // 初始时，默认列展示，仅初次渲染
        if (!_this.tableShowColumnValues.length) {
          _this.tableShowColumnValues = _this.tableInitColumn.map(item => item.value);
        }
        // 导出已选exccl配置数据，全字段导出，仅初次渲染
        if (!Object.keys(_this.exportExcel.fields).length) {
          _this.exportExcelFieldsSet(_this.column.filter(item => !item.hideInTable));
        }
      },
      immediate: true,
      deep: true
    },
    tableShowColumnValues: {
      handler: () => {
        _this.tableShowColumn = _this.tableInitColumn.filter(item =>
          _this.tableShowColumnValues.includes(item.value)
        );
        _this.stickyDataOffsetLeft = {};
        _this.stickyDataOffsetRight = {};

        _this.tableShowColumn.forEach(item => {
          if (item?.fixed === 'left') {
            _this.stickyDataOffsetLeft[item.value] = 0;
          }
          if (item?.fixed === 'right') {
            _this.stickyDataOffsetRight[item.value] = 0;
          }
        });
        try {
          _this.getStickyOffset();
        } catch (e) {
          //TODO handle the exception
        }
      },
      immediate: true,
      deep: true
    },
    // 配置本地数据
    localData: {
      handler: () => {
        _this.dataList = _this.localData;
        _this.paginationTotal = _this.localData.length;
      },
      immediate: true,
      deep: true
    },
    pagination: {
      handler: () => {
        if (typeof _this.pagination !== 'boolean') {
          _this.paginationConfig = {
            ..._this.paginationConfig,
            ..._this.pagination
          };
        }
      },
      immediate: true,
      deep: true
    },
    selectPageData: {
      handler: () => {
        _this.selectData = Object.keys(_this.selectPageData)
          .map(item => _this.selectPageData[item])
          .flat(Infinity);
        _this.$emit('onSelectionChange', _this.selectData);
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.searchOpenAll = this.defaultOpenSearch;
  },
  mounted() {
    this.$nextTick(() => {
      // 当本地数据不存在且有requestMethod方法时
      if (this.requestMethod && !this.localData.length && this.autoRequest) {
        this.$refs.mosoweSearchRef.submit();
      }
      this.init();
    });
  },
  methods: {
    // 通过td当前点击的数据和在第几行
    onGetTdItemChange(data,index){
      const item = {
        data:data || {},
        index:index || 0
      }
      this.$emit("onGetTdItemChange",item)
    },
    init() {
      // 获取序号左边距离
      this.stickyIndexOffsetLeft =
        document.getElementsByClassName('mosowe-index')[0]?.offsetLeft || 0;
      // 获取数据项元素固定列的左右边距
      // this.getStickyOffset();
      // 导出已选配置
      this.exportExcel = {
        ...this.exportExcel,
        ...this.exportSelectConfig
      };
      if (!this.exportExcel.filename) {
        this.exportExcel.filename = this.title || Date.now().toString();
      }
    },
    // 获取数据项元素固定列的左右边距
    getStickyOffset() {
      let t = setTimeout(() => {
        clearTimeout(t);
        t = null;
        // 左侧固定列配置
        Object.keys(this.stickyDataOffsetLeft).forEach(item => {
          this.stickyDataOffsetLeft[item] =
            document.getElementsByClassName('th-fixed-left-' + item)[0]?.offsetLeft + 'px';
        });
        // 右侧固定列配置
        // 第一步获取对应宽度
        const widthArr = [];
        Object.keys(this.stickyDataOffsetRight).forEach(item => {
          widthArr.push(document.getElementsByClassName('th-fixed-right-' + item)[0]?.clientWidth);
        });
        // 第二步累加
        Object.keys(this.stickyDataOffsetRight).forEach((item, index) => {
          const arr = [...widthArr];
          const width = eval(arr.slice(index + 1).join('+')) || 0;
          const operationW =
            this.rowOperation.length || this.$slots.rowOperation
              ? Number(this.rowOperationWidth.match(/\d*/))
              : 0;
          this.stickyDataOffsetRight[item] = width + operationW + 'px';
        });
      }, 10);
    },
    // 搜索-展开/收起功能
    searchOpenCloseFunction() {
      if (typeof this.searchOpenAll === 'boolean' && this.searchOpenAll) {
        Object.keys(this.searchConfig.list[0].items).forEach(key => {
          this.searchConfig.list[0].items[key].visible = true;
        });
        return;
      }
      if (typeof this.searchOpenAll === 'boolean' && !this.searchOpenAll) {
        Object.keys(this.searchConfig.list[0].items).forEach((key, index) => {
          this.searchConfig.list[0].items[key].visible =
            index < this.defaultShowSearchNumber ? true : false;
        });
        return;
      }
      if (typeof this.searchOpenAll === 'number' && this.searchOpenAll) {
        Object.keys(this.searchConfig.list[0].items).forEach((key, index) => {
          this.searchConfig.list[0].items[key].visible = index < this.searchOpenAll ? true : false;
        });
      }
    },
    // 搜索-点击展开/收起按钮
    onSearchOpen() {
      this.searchOpenAll = this.searchOpenAll === false ? true : false;
      this.searchOpenCloseFunction();
    },
    // 搜索-查询/重置
    searchDate(value) {
      this.searchQuery = value;
      this.refresh();
    },
    // 搜索-表单改变
    searchFromChange(name, value) {
      this.$emit('onSearchChange', name, value);
    },
    // toolbar-按钮显示配置
    toolbarSet(key) {
      if (typeof this.toolbar === 'boolean') {
        return this.toolbar;
      } else {
        return this.toolbar.indexOf(key) > -1;
      }
    },
    // toolbar-导出已选
    onExportSelect() {
      this.exportData = this.selectData.map(item => {
        let r = item;
        this.tableInitColumn.forEach(column => {
          if (column?.enum) {
            r[column.value] = this.tableTdContent(column, r[column.value]);
          }
        });
        return r;
      });
      let t = setTimeout(() => {
        clearTimeout(t);
        t = null;
        this.$refs.downloadExcelRef.generate();
        this.tableSelectionAllClear();
      }, 10);
    },
    // toolbar-导出已选-fields配置
    exportExcelFieldsSet(list) {
      list.forEach(item => {
        if (item?.children) {
          this.exportExcelFieldsSet(item?.children);
        } else {
          this.exportExcel.fields[item.text] = item.value;
        }
      });
    },
    // toolbar-刷新
    refresh() {
      this.paginationConfig.current = 1;
      this.tableSelectionAllClear();
      this.requestParams();
    },
    // 数据请求前参数整合
    requestParams() {
      const params = {
        ...this.searchQuery,
        ...this.paginationConfig
      };
      this.searchQuery = params;
      // 下一步数据请求
      this.requestData();
    },
    // requestMethod数据请求
    requestData() {
      this.tableLoading = true;
      this.requestMethod(this.searchQuery)
        .then(res => {
          this.tableLoading = false;
          try {
            const data = this.initBefore(res);
            this.dataList = data.list;
            this.paginationTotal = data.total;
          } catch (e) {
            this.dataList = res.data[this.dataListKey];
            this.paginationTotal = res.data[this.dataTotalKey];
          }
          this.requestDataAfter();
        })
        .catch(err => {
          this.tableLoading = false;
          console.error('requestMethod is error:' + err);
        });
    },
    // requestMethod数据请求完成后
    requestDataAfter() {
      if (this.tableProps?.type === 'selection') {
        // 删除之前的已选
        this.tableSelectionPageClear();
        // 如果开启了多选，进行数据回显
        this.tableSelectionEchoSelected();
      }
    },
    // 分页-每页数量改变
    pageSizeChange(item) {
      this.paginationConfig.pageSize = item.value;
      this.refresh();
    },
    // 分页-页码改变
    paginationChange(value) {
      this.tableSelectionSaveData();
      if (this.paginationCurrentTimer) {
        clearTimeout(this.paginationCurrentTimer);
      }
      this.paginationCurrentTimer = setTimeout(() => {
        clearTimeout(this.paginationCurrentTimer);
        this.paginationCurrentTimer = null;
        this.paginationConfig.current = value.current;
        this.requestParams();
      }, 300);
    },
    // 表格区-td内容过滤展示
    tableTdContent(column, value) {
      if (column?.enum && Array.isArray(column?.enum)) {
        const data = column?.enum.filter(item => item.value === value);
        return data.length ? data[0].text : value;
      }
      return value;
    },
    // 表格区-多选/单选-选项改变时
    tableSelectionChange(data) {
      this.selectCurrent = this.paginationConfig.current;
      this.selectCurrentIndexs = data.detail.index;
      if (this.radio) {
        if (data.detail.index.length > 1) {
          this.tableSelectionAllClear();
          this.$refs?.mosoweTableRef?.toggleRowSelection(data.detail.index[1], true);
        }
        if (this.selectCurrentIndexs.length === 1) {
          this.selectPageData = {
            [this.selectCurrent]: this.selectCurrentIndexs.map(item => this.dataList[item])
          };
        } else if (this.selectCurrentIndexs.length === 0) {
          this.selectPageData = {};
        }
      } else {
        this.selectPageData = {
          ...this.selectPageData,
          [this.selectCurrent]: this.selectCurrentIndexs.map(item => this.dataList[item])
        };
      }
      this.$emit('selectPageData',this.selectPageData)
    },
    // 表格区-多选/单选-保存已选选项索引及相关值
    tableSelectionSaveData() {
      if (this.radio) {
        if (this.selectCurrentIndexs.length === 1) {
          this.selectPageIndexs = {
            [this.selectCurrent]: [...this.selectCurrentIndexs]
          };
          this.selectPageData = {
            [this.selectCurrent]: this.selectCurrentIndexs.map(item => this.dataList[item])
          };
        } else if (this.selectCurrentIndexs.length === 0) {
          this.selectPageIndexs = {};
          this.selectPageData = {};
        }
      } else {
        this.selectPageIndexs = {
          ...this.selectPageIndexs,
          [this.selectCurrent]: [...this.selectCurrentIndexs]
        };
        this.selectPageData = {
          ...this.selectPageData,
          [this.selectCurrent]: this.selectCurrentIndexs.map(item => this.dataList[item])
        };
      }
    },
    // 表格区-多选-清空当前页已选数据
    tableSelectionPageClear() {
      this.$refs?.mosoweTableRef?.clearSelection();
    },
    // 表格区-多选-清空所有已选数据
    tableSelectionAllClear() {
      this.$refs?.mosoweTableRef?.clearSelection();
      this.selectCurrentIndexs = [];
      this.selectPageIndexs = {};
      this.selectPageData = {};
    },
    // 表格区-多选-回显当前页已选数据
    tableSelectionEchoSelected() {
      this.selectCurrentIndexs = this.selectPageIndexs[this.paginationConfig.current] || [];
      this.$refs?.mosoweTableRef?.toggleRowSelection(this.selectCurrentIndexs, true);
    },
    // 表格区-th点击排序
    tableThSortChange(event,obj) {
      this.$emit('onSortChange', event,obj);
    },
    // 表格区-th点击筛选
    tableThFilterChange(obj) {
      this.$emit('onFilterChange', obj);
    }
  }
};
</script>

<style lang="scss" scoped>
.mosowe-table-component {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .mosowe-table-search {
    background-color: #fff;
    padding: 10px 0 0 0;
    :deep(.uni-forms-item) {
      margin-bottom: 10px;
    }
    :deep(.uni-forms-item__content) {
      height: 36px;
    }
    .search-btn-wrap {
      flex: 1;
      text-align: right;
      margin-bottom: 10px;
      .search-btn {
        vertical-align: middle;
        height: 36px;
        line-height: 36px;
        display: inline-block;
        margin: 0 8px;
      }
      .search-open-btn {
        vertical-align: middle;
        display: inline-block;
        font-size: 14px;
        line-height: 36px;
        margin: 0 8px;
        cursor: pointer;
        color: $uni-color-primary;
      }
    }
  }
  .mosowe-table-toolbar {
    display: flex;
    padding: 10px 0;
    position: relative;
    .table-title {
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      line-height: 36px;
      margin-right: 10px;
    }
    .mosowe-table-toolbar-left {
      flex: 1;
      .left-btn-item {
        height: 36px;
        line-height: 36px;
        box-sizing: border-box;
        & + .left-btn-item {
          margin-left: 10px;
        }
      }
    }
    .mosowe-table-toolbar-right {
      .right-btn-item {
        display: inline-block;
        white-space: nowrap;
        line-height: 36px;
        cursor: pointer;
        margin: 0 5px;
        position: relative;
        .icon {
          font-size: 20px;
          font-weight: bold;
          line-height: 36px;
          &.uni-icons-refreshempty {
            font-size: 24px;
          }
        }
        .dropdown-column-list {
          position: absolute;
          right: 0;
          top: 100%;
          z-index: 3;
          background-color: #fff;
          padding: 10px 15px;
          border-radius: 8px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          width: 200px;
          .dropdown-column-list-content {
            overflow: hidden;
            overflow-y: auto;
            max-height: 200px;
          }
          .dropdown-column-list-close {
            margin-top: 10px;
          }
        }
      }
    }
  }
  .mosowe-table-table {
    flex: 1;
    overflow: hidden;
    position: relative;
    .mosowe-table-table-content {
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      overflow-x: auto;
    }
    &.mosowe-table-auto-height {
      flex: none;
      .mosowe-table-table-content {
        height: auto;
      }
    }
    &.mosowe-table-max-height {
      flex: none;
      max-height: var(--table-max-height);
      .mosowe-table-table-content {
        max-height: var(--table-max-height);
      }
    }
    &.mosowe-table-radio-selection {
      :deep(.uni-table-checkbox .checkbox__inner) {
        border-radius: 50%;
      }
      .table-head-wrap {
        :deep(.uni-table-checkbox) {
          display: none;
        }
      }
    }
    .table-bottom-shadow {
      position: absolute;
      z-index: 2;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1px;
      background-color: #eee;
      z-index: 1;
      box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.05);
    }
    .table-head-wrap {
      position: sticky;
      left: 0;
      top: 0;
      z-index: 2;
      :deep(th[class='checkbox']) {
        background-color: #f0f0f0;
      }
      :deep(.opera-area .btn) {
        text-align: center;
      }
    }
    .children-head-th,
    .children-body-td {
      // border-right: none;
      padding: 0;
      :deep(.uni-table-th-content) {
        flex: none;
        width: 100%;
        display: block;
      }
    }
    .th-fixed-left,
    .td-fixed-left,
    :deep(.checkbox) {
      position: sticky;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .td-fixed-left,
    .table-body-wrap :deep(.checkbox) {
      top: unset;
    }
    .fixed-left-shadow {
      box-shadow: 4px 0 2px rgba(0, 0, 0, 0.03);
    }
    .th-fixed-right,
    .td-fixed-right {
      position: sticky;
      right: 0;
      top: 0;
      z-index: 1;
    }
    .td-fixed-right {
      top: unset;
    }
    .fixed-right-shadow {
      box-shadow: -4px 0 2px rgba(0, 0, 0, 0.03);
    }
    .td-fixed-left,
    .td-fixed-right,
    :deep(.checkbox) {
      background-color: inherit;
    }
    :deep(.checkbox) {
      box-shadow: var(--checkbox-shadow);
    }
    .table-tr-operation-btn {
      display: inline-block;
      vertical-align: middle;
      margin: 5px;
      cursor: pointer;
    }

    :deep(.uni-table) {
      position: unset;
      .uni-table-tr {
        background-color: #ffffff;
      }
    }
    :deep(.table--stripe .uni-table-tr:nth-child(2n + 3)) {
      background-color: #fafafa;
    }
    :deep(.table--stripe .uni-table-tr:nth-child(2n)) {
      background-color: #fff;
    }
    :deep(.uni-table-tr:nth-child(n + 2)) {
      &:hover {
        background-color: #f5f7fa;
      }
    }
    :deep(.uni-table-scroll) {
      overflow-x: unset;
    }
  }
  .mosowe-table-pagination {
    position: relative;
    z-index: 2;
    padding: 10px;
    display: flex;
    .pagination-left {
      flex: 1;
    }
    .pagination-content {
      display: flex;
      :deep(.mosowe-dropdown-component .mosowe-dropdown-position .mosowe-dropdown-item) {
        width: 60px;
      }
      :deep(.mosowe-dropdown-component) {
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 4px 10px;
        margin-right: 10px;
      }
      .pagination-size-text {
        color: #999;
      }
    }
  }
}

:deep(.uni-table-th) {
  background-color: #f0f0f0;
}

uni-button[type='success'] {
  background-color: #4cd964;
  color: #fff;
}
uni-button[disabled][type='success'] {
  background-color: #5adb70;
  color: rgba(255, 255, 255, 0.6);
}
uni-button[type='border'] {
  background: none;
  border: 1px solid #eee;
  box-sizing: border-box;
  color: #666;
}
.button-hover[type='success'] {
  background-color: #3eb152;
  color: rgba(255, 255, 255, 0.6);
}
.table-scroll-bar {
  &::-webkit-scrollbar {
    width: 5px;
    height: 10px;
  } /*滚动条宽度设置：宽度为0 ，当有滚动条出现的时候则不显示滚动条*/
  &::-webkit-scrollbar-track {
    background-color: #fff;
  } /*滚动条槽背景设置*/
  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 5px;
  } /*滚动条滑块颜色设置*/
  &::-webkit-scrollbar-thumb:hover {
    background-color: #ccc;
  } /*滚动条滑块鼠标移上去颜色设置*/
  &::-webkit-scrollbar-thumb:active {
    background-color: #ccc;
  } /*滚动条鼠标点击颜色设置*/
}
</style>
